import React from 'react';
import { Select } from 'antd';
import type { buildDimensionChartDataType } from '@/utils/buildTableByDimension';
import './index.less';

// 此处缺少一个逻辑（比如[0,1,2],比如切换1的时候应该把2切换为0），目前不加，因为后端说数据条数是一致的
const TjDimensionOptions: React.FC<ITjDimensionOptionsProps> = (props) => {
  const changeDimensionOptions = (val: string | number, index: number) => {
    const currentIndex = props.filterOptions[index].findIndex((v) => v.value === val);
    const newListVal = [...props.listVal];
    newListVal[index] = currentIndex;
    props.changeDimensionOptions && props.changeDimensionOptions(newListVal, index);
  };

  return (
    <div className="tj-dimension-options">
      {props.filterOptions.length > 0 &&
        props.listVal.length >= 1 &&
        props.filterOptions.map((v: any[], i) => {
          return (
            <Select
              style={{ width: 160 }}
              value={props.filterOptions[i][props.listVal[i]].value || undefined}
              options={v}
              loading={props.loading}
              onChange={(val) => changeDimensionOptions(val, i)}
              key={i}
              allowClear={false}
              showSearch
              filterOption={(input, option) =>
                (option?.label ?? '').toString().toLowerCase().includes(input.toLowerCase())
              }
            />
          );
        })}
    </div>
  );
};

interface ITjDimensionOptionsProps {
  filterOptions: buildDimensionChartDataType['filterOption'];
  listVal: buildDimensionChartDataType['valIndex'];
  changeDimensionOptions?: (val: buildDimensionChartDataType['valIndex'], index: number) => void;
  loading: boolean;
}

export { TjDimensionOptions };
